<template>
  <div class="flex-x volume_toolbar">
    <img
      @click="setVolumeAll"
      :src="getIcon"
      style="width: 20px;height: 20px;min-width: 20px;max-height: 20px;"
      alt=""
    />
    <!-- <el-tooltip
      placement="top"
      effect="light"
      popper-class="volume_toolbar_icons"
    >
      <div slot="content" class="flex-x">
        <img
          @click="setVolumeAll"
          :src="getIcon"
          style="width: 20px;height: 20px;min-width: 20px;max-height: 20px;margin-right: 10px;"
          alt=""
        />
        <el-slider
          @change="change"
          style="width: 200px;"
          v-model="volumeNumber"
        ></el-slider>
      </div>
      <img
        @click="setVolumeAll"
        :src="getIcon"
        style="width: 20px;height: 20px;min-width: 20px;max-height: 20px;"
        alt=""
      />
    </el-tooltip> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      volumeNumber: 0
    };
  },
  computed: {
    getIcon() {
      return this.volumeNumber
        ? require("@/assets/images/shengyin_yes.png")
        : require("@/assets/images/shengyin_no.png");
    }
  },
  methods: {
    setVolumeAll() {
      this.volumeNumber = this.volumeNumber ? 0 : 1;
      this.$emit("setVolumeAll", this.volumeNumber);
    },
    change(val) {
      this.$emit("changeSound", val);
    }
  }
};
</script>

<style lang="scss">
.volume_toolbar_icons {
  .win_item {
    display: block;
    width: 20px;
    height: 20px;
    min-width: 20px;
    max-height: 20px;
  }
}
.volume_toolbar {
  background-color: #435e91;
  height: 35px;
  width: calc(100% - 5px);
}
</style>
